Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

canvas

Package Overview
Dependencies
Maintainers
8
Versions
148
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

canvas

Canvas graphics API backed by Cairo

  • 2.11.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
2.6M
increased by3.91%
Maintainers
8
Weekly downloads
 
Created

What is canvas?

The canvas npm package is a powerful library that allows Node.js users to draw 2D graphics on the fly using a Canvas API similar to the one provided by browsers. It can be used for creating images, manipulating graphics, and generating dynamic visual content.

What are canvas's main functionalities?

Drawing shapes

This feature allows you to draw basic shapes such as rectangles, circles, and lines on the canvas.

const { createCanvas } = require('canvas');
const canvas = createCanvas(200, 200);
const ctx = canvas.getContext('2d');

// Draw a rectangle
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 150, 100);

Text manipulation

With the canvas package, you can add text to your images, apply fonts, styles, and rotation.

const { createCanvas } = require('canvas');
const canvas = createCanvas(200, 200);
const ctx = canvas.getContext('2d');

// Draw text
ctx.font = '30px Impact';
ctx.rotate(0.1);
ctx.fillText('Awesome!', 50, 100);

Image manipulation

This feature allows you to load images, draw them onto the canvas, and manipulate their appearance.

const { createCanvas, loadImage } = require('canvas');
const canvas = createCanvas(200, 200);
const ctx = canvas.getContext('2d');

loadImage('image.png').then((image) => {
  ctx.drawImage(image, 50, 50, 150, 100);
});

Pixel manipulation

Canvas allows direct pixel manipulation for effects like inversion, brightness, contrast, and more.

const { createCanvas } = require('canvas');
const canvas = createCanvas(200, 200);
const ctx = canvas.getContext('2d');

// Draw a rectangle
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 50, 50);

// Get pixel data
const imageData = ctx.getImageData(0, 0, 50, 50);

// Manipulate pixels
for (let i = 0; i < imageData.data.length; i += 4) {
  imageData.data[i] = 255 - imageData.data[i]; // Invert red
  imageData.data[i+1] = 255 - imageData.data[i+1]; // Invert green
  imageData.data[i+2] = 255 - imageData.data[i+2]; // Invert blue
}

// Put the image data back onto the canvas
ctx.putImageData(imageData, 0, 0);

Other packages similar to canvas

Keywords

FAQs

Package last updated on 02 Apr 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc